<template>
	<view>
		<view class="nav-box">
			<view v-for="(item,index) in navArr" @click="changeCon(index+1)" :class="{active: isShowI==index+1}">{{item}}</view>
		</view>
		<view class="common">
			<view style="color: black;">综合</view> 
			<view>价格▲▼</view>
		</view>
		<!-- <view v-for="(item,index) in conArr" v-show="isShowI==(index+1)" class="con">{{item}}</view> -->
		<view v-show="isShowI==1" class="con">   <!-- 页面1 -->
			<view class="conbox">      <!-- 商品详情-->
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231019/5ace9b5ef00dd3b2f8723576bec74d89-100029441.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3</view>
					<view class="text">超轻薄折叠大屏</view>
					<view><span class="lixi">24期免息</span></view>
					<view class="price">¥9999</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230829/5ace9b5ef00dd3b2f8723576bec74d89-782417846.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3 Flip</view>
					<view class="text">明星舒淇同款</view>
					<view><span class="lixi">24期免息</span><span class="lixi2">赠</span><span class="lixi2">积分抵1%</span></view>
					<view class="price"><span class="text2">到手价</span>¥6799</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230202/33f005e8ab638f798703bb9dcb172463-1431747817.png?_w_=320&_h_=320&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N2 flip</view>
					<view class="text">独创大外屏</view>
					<view><span class="lixi">12期免息</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥6999</view>
				</view>
			</view>
		</view>
		
		<view v-show="isShowI==2" class="con"> <!-- 页面2 -->
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230320/c5e646a15bb124245c4d8ac9ecf97cbe1843183689.png?_w_=320&_h_=320&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find X6 Pro</view>
					<view class="text">超光影三主摄</view>
					<view><span class="lixi">24期免息</span><span class="lixi2">积分抵2%</span></view>
					<view class="price">¥5499</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230320/307074d9c4f19fdba301d4ceba51480b-698843175.png?_w_=320&_h_=320&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find X6 </view>
					<view class="text">超光感潜望长焦</view>
					<view><span class="lixi">24期免息</span><span class="lixi2">积分抵2%</span></view>
					<view class="price">¥3999</view>
				</view>
			</view>
		</view>
		<view v-show="isShowI==3" class="con">        <!-- 页面3 -->
			<view class="conbox">      <!-- 商品详情-->
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231114/abc3949749e508dd97cc92bab7164bc0-2132177433.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Reno 11</view>
					<view class="text">5000万单反级人像三摄</view>
					<view><span class="lixi">24期免息</span></view>
					<view class="price">¥2399</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231115/cfeaec8f7cae54b65574befb9148b0e7179500947.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Reno 11 Pro</view>
					<view class="text">满血版骁龙8+旗舰芯片</view>
					<view><span class="lixi">24期免息</span><span class="lixi2">赠</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥3499</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/MEDIA/20230516/30d60d55fefb37dd21adb1422b19d2a22021193044.png?_w_=320&_h_=320&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Reno 10 Pro+</view>
					<view class="text">100W超级快充</view>
					<view><span class="lixi">12期免息</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥3699</view>
				</view>
			</view>
			
			<view class="conbox">      <!-- 商品详情-->
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231019/5ace9b5ef00dd3b2f8723576bec74d89-100029441.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3</view>
					<view class="text">超轻薄折叠大屏</view>
					<view><span class="lixi">24期免息</span></view>
					<view class="price">¥9999</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230829/5ace9b5ef00dd3b2f8723576bec74d89-782417846.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3 Flip</view>
					<view class="text">明星舒淇同款</view>
					<view><span class="lixi">24期免息</span><span class="lixi2">赠</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥6799</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230202/33f005e8ab638f798703bb9dcb172463-1431747817.png?_w_=320&_h_=320&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N2 flip</view>
					<view class="text">独创大外屏</view>
					<view><span class="lixi">12期免息</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥6999</view>
				</view>
			</view>
		</view>
		<view v-show="isShowI==4" class="con"> 			<!-- 页面4 -->
			<view class="conbox">      <!-- 商品详情-->
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231019/5ace9b5ef00dd3b2f8723576bec74d89-100029441.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3</view>
					<view class="text">超轻薄折叠大屏</view>
					<view><span class="lixi">24期免息</span></view>
					<view class="price">¥9999</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230829/5ace9b5ef00dd3b2f8723576bec74d89-782417846.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3 Flip</view>
					<view class="text">明星舒淇同款</view>
					<view><span class="lixi">24期免息</span><span class="lixi2">赠</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥6799</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230202/33f005e8ab638f798703bb9dcb172463-1431747817.png?_w_=320&_h_=320&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N2 flip</view>
					<view class="text">独创大外屏</view>
					<view><span class="lixi">12期免息</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥6999</view>
				</view>
			</view>
			
			<view class="conbox">      <!-- 商品详情-->
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231019/5ace9b5ef00dd3b2f8723576bec74d89-100029441.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3</view>
					<view class="text">超轻薄折叠大屏</view>
					<view><span class="lixi">24期免息</span></view>
					<view class="price">¥9999</view>
				</view>
			</view>
			
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230829/5ace9b5ef00dd3b2f8723576bec74d89-782417846.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3 Flip</view>
					<view class="text">明星舒淇同款</view>
					<view><span class="lixi">24期免息</span><span class="lixi2">赠</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥6799</view>
				</view>
			</view>
			
		</view>
		
		<view v-show="isShowI==5" class="con"> 			<!-- 页面5 -->
			<view class="conbox">
				<view class="conboxleft">
					<image src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230829/5ace9b5ef00dd3b2f8723576bec74d89-782417846.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480&x-oss-process=image/format,webp"></image>
				</view>
				<view class="conboxright">
					<view class="title">OPPO Find N3 Flip</view>
					<view class="text">明星舒淇同款</view>
					<view><span class="lixi">24期免息</span><span class="lixi2">赠</span><span class="lixi2">积分抵1%</span></view>
					<view class="price">¥6799</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navArr: ['OPPO Find N','OPPO Find X','OPPO Reno','OPPO K','OPPO A'],
				conArr: ['内容1','内容2','内容3','内容4','内容5'],
				isShowI: 1
			}
		},
		methods: {
			changeCon(index){
				console.log("切换:",index);
				this.isShowI = index
			}
		}
	}
</script>

<style>
	body{
		background-color: #f7f8fa;
	}
.nav-box{
	display: flex;
	color: gray;
	background-color: white;
	text-align: center;
	font-size: 15rpx;
}
.nav-box view{
	padding: 10rpx 30rpx;
}
.active{
	color: black;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	border-bottom-color: black;
}
.common{
	display: flex;
	width: 700rpx;
	height: 30rpx;
}
.common view{
	padding: 10rpx 30rpx;
	text-align: center;
	font-size: 10rpx;  
	color: gray;
}
.con{
	height: 100%;
	width: 750rpx;
	flex-wrap: wrap;
}
.conbox{
	display: flex;
	width: 720rpx;
	height: 130rpx;
	background-color: white;
	margin: 8rpx 15rpx;
}
.conboxleft{
	width: 125rpx;
	height: 125rpx;
}
.conboxleft image{
	width: 125rpx;
	height: 125rpx;
}
.conboxright{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 595rpx;
	height: 125rpx;
}
.conboxright .title{
	font-size: 15rpx;
	
}
.conboxright .text{
	font-size: 10rpx;
	color: gray;
	
}
.conboxright .text2{
	font-size: 10rpx;
	color: red;
	margin: 2rpx 2rpx;
}
.conboxright .lixi{
	font-size: 10rpx;
	border: solid 2rpx;
	border-color: skyblue;
	color: skyblue;
	padding: 1rpx 2rpx;
	margin: 0rpx 5rpx;
}
.conboxright .lixi2{
	font-size: 10rpx;
	border: solid 2rpx;
	border-color: red;
	color: red;
	padding: 1rpx 1rpx;
}
.conboxright .price{
	font-size: 18rpx;
	color: red;
}
</style>